<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul,h4{
            list-style: none;
            margin: 0;
            padding:0;
        }
        #list{
            width: 260px;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            user-select: none;
        }
        #list h4{
            background-color: rgb(47, 194, 17);
            line-height: 36px;
            text-indent: 1em;
            color: #fff;
        }
        #list ul li{
            line-height: 28px;
            text-indent: 1em;
            border-bottom: 1px dashed #e8e8e8;
        }
        #list ul li:hover{
            background-color: rgb(149, 238, 131);;
        }
        #list ul{
            display: none;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <h4>我的好友</h4>
            <ul>
                <li>张学友</li>
                <li>张曼玉</li>
                <li>郭升</li>
            </ul>
        </li>
        <li>
            <h4>我的同学</h4>
            <ul>
                <li>马云</li>
                <li>任正非</li>
                <li>房圣博</li>
            </ul>
        </li>
        <li>
            <h4>我的同事</h4>
            <ul>
                <li>马化腾</li>
                <li>雷军</li>
            </ul>
        </li>
        <li>
            <h4>黑名单</h4>
            <ul>
                <li>田某某</li>
                <li>xxx</li>
            </ul>
        </li>
    </ul>

    <script>
        let oList = document.getElementById("list");
        let aH4 = oList.getElementsByTagName("h4");
        let aUl = oList.getElementsByTagName("ul");

        for (let i = 0; i < aH4.length; i++) {
            aH4[i].onOff = true;
            aH4[i].onclick = function(){
                if(aH4[i].onOff){
                    aUl[i].style.display = 'block';
                }
                else{
                    aUl[i].style.display = 'none';
                }
                aH4[i].onOff = !aH4[i].onOff;
            }
        }
    </script>
</body>
</html>